<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>C3轮播图</title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 130px;
				margin: 100px auto;
				overflow: hidden;
			}
			.picture {
				width: 1200px;
				height: 130px;
				animation: switch 5s ease 0s infinite;
			}
			img {
				float: left;
			}
			
			@-webkit-keyframes switch{
				0%, 9% {
					margin-left: 0;
				}
				18%, 27% {
					margin-left: -200px;
				}
				36%, 45% {
					margin-left: -400px;
				}
				54%, 63% {
					margin-left: -600px;
				}
				72%, 81% {
					margin-left: -800px;
				}
				90%, 100% {
					margin-left: -1000px;
				}
			}
			
			.picture:hover {
				/*动画暂停播放*/
				-webkit-animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="picture">
				<img src="../img/0.png" />
				<img src="../img/1.png" />
				<img src="../img/2.png" />
				<img src="../img/3.png" />
				<img src="../img/4.png" />
				<img src="../img/0.png" />
			</div>
		</div>
		
	</body>
</html>
